.wrap {
  padding-bottom: 74px;
  background-color: #000;
  padding-top: 81px;
  padding-left: 180px;
  padding-right: 180px;
  position: relative;
  padding-bottom: 200px;
  position: relative;
  background-color: rgb(17, 15, 15);
  .bg {
    background-image: url(/img/home/grid-left-bottom.svg);
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 723px;
    width: 925px;
  }

  .title {
    color: #fff;
    text-align: center;
    font-size: 40px;
    line-height: 56px;
    font-weight: 700;
    margin-bottom: 156px;
    .subTitle {
      color: #fff;
      font-size: 28px;
      width: 944px;
      margin: auto;
      margin-top: 30px;
      text-align: center;
      line-height: 35px;
    }
  }
  .showList {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 38px 32px;
    position: relative;
    z-index: 200;

    .listItem {
      width: 100%;
      border-radius: 4px;
      padding: 20px;
      box-sizing: border-box;
      color: #fff;
      border: 1px solid var(--box-border-color);
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      background-color: #000;
      .icon {
        width: 48px;
        height: 48px;
        display: inline-block;
      }
      &.listItem1 {
        .icon {
          background-image: url(/img/home/feature/muc.svg);
        }
      }
      &.listItem2 {
        .icon {
          background-image: url(/img/home/feature/hesc.svg);
        }
      }
      &.listItem3 {
        .icon {
          background-image: url(/img/home/feature/sac.svg);
        }
      }
      &.listItem4 {
        .icon {
          background-image: url(/img/home/feature/cuwmt.svg);
        }
      }
      &.listItem5 {
        .icon {
          background-image: url(/img/home/feature/p14i.svg);
        }
      }
      &.listItem6 {
        .icon {
          background-image: url(/img/home/feature/mef.svg);
        }
      }

      .itemTitle {
        color: #fff;
        font-size: 28px;
        line-height: 36px;
        font-weight: 700;
        margin-bottom: 12px;
      }
    }
  }
  @media screen and (max-width: 1440px) {
    padding-left: 100px;
    padding-right: 100px;
    .showList {
      &.top {
        .listItem {
          margin-bottom: 20px;
        }
      }
    }
    .title {
      .subTitle {
        width: auto;
      }
    }
  }
  @media screen and (max-width: 1024px) {
    height: 100%;
    padding-left: var(--mobile-padding-width) !important;
    padding-right: var(--mobile-padding-width) !important;

    .showList {
      width: 100%;
      padding: 0 var(--mobile-padding-width);
      box-sizing: border-box;
      margin-top: 40px;
      display: grid;
      gap: 32px;
      grid-template-columns: 1fr 1fr;
      padding: 0;
      .listItem {
        width: 100%;
        height: auto;

        img {
          width: 30px;
        }
      }
    }
    .bg {
      width: 800px;
      background-size: contain;
      background-position: left bottom;
    }
  }
  @media screen and (max-width: 768px) {
    padding-left: 74px;
    padding-right: 74px;
    .title {
      font-size: 30px;
    }
    .showList {
      width: 100% !important;
      grid-template-columns: auto;
      gap: 32px;
      .listItem {
        width: 100%;
        .itemTitle {
          font-size: 20px;
          line-height: 1;
        }
      }
    }
    .bg {
      width: 90%;
    }
  }
}
